<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-09 15:49:45
 * @LastEditors: 赵天利 5450026+zhaotianli01@user.noreply.gitee.com
 * @LastEditTime: 2024-01-25 17:22:49
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\AccidentEvents\components\environment\enviorDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="py-1 px-1 bg-white" :style="{ paddingBottom: descData.eventSource === '企业新增' ? '2rem !important' : ''}">
    <custom-title :is-line="true" title="事故详情" />
    <div class="baseLoad">
      <div v-for="(item, index) in descList" :key="index">
        <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''">
          <template #valueSlot>
            <div v-if="!item.isFile" class="desContent">{{ item.value }}</div>
            <!--          <div v-for="(file,ind) in item.value" v-else :key="file.attachUuid + ind">-->
            <!--            <el-link style="margin-right: 10px" type="primary" class="desContent c-text-primary" @click="handleDownLoad(file['fileUrl'])">{{ file['fileName'] }}</el-link>-->
            <!--          </div>-->
            <div v-else class="value">
              <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
            </div>
          </template>
        </custom-details-item>
      </div>
    </div>
    <custom-title :is-line="true" title="伤亡人员信息" />
    <div class="common_list" style="padding: 0">
      <template v-if="casualtiesPersonList && casualtiesPersonList.length>0">
        <div v-for="(item, index) in casualtiesPersonList" :key="index" class="list_item">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">{{ item.name }}</div>
              <ul>
                <li v-for="(it,ind) in deviceFieldList" :key="index + '' + ind">
                  <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="it.icon" />
                  <div class="label">{{ it.label }}：</div>
                  <div class="value">{{ item[it.field] }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
      <el-empty v-else class="baseLoad1" />
    </div>
    <template v-if="descData.auditResult === '审核通过' || descData.auditResult === '审核不通过'">
      <custom-title :is-line="true" title="审核信息" />
      <div v-for="(item, index) in examineDescList" :key="index">
        <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''">
          <template #valueSlot>
            <div v-if="!item.isFile" class="desContent">{{ item.value }}</div>
            <!--            <div v-for="(file,ind) in item.value" v-else :key="file.attachUuid + ind">-->
            <!--              <el-link style="margin-right: 10px" type="primary" class="desContent c-text-primary" @click="handleDownLoad(file['fileUrl'])">{{ file['fileName'] }}</el-link>-->
            <!--            </div>-->
            <div v-else class="value">
              <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
            </div>
          </template>
        </custom-details-item>
      </div>
    </template>
    <div v-if="descData.eventSource === '企业新增'" class="bottom-box d-flex justify-content-center align-items-center" :style="{'z-index':3000}">
      <van-button v-if="descData.auditResult === '待审核'" plain type="warning" size="small" class="mr-2" @click="auditComponentShow = true">审核</van-button>
      <van-button plain type="info" size="small" @click="getEnvironmentEventAuditList">流程监控</van-button>
    </div>
    <!-- 审核 -->
    <van-popup
      v-model="auditComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">审核</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <auditComponent v-if="auditComponentShow" v-model="auditComponentShow" />
        </div>
      </div>
    </van-popup>
    <!-- 流程监控 -->
    <van-popup
      v-model="flowComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">流程监控</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <customTimelineSimple v-if="flowComponentShow" v-model="flowComponentShow" :list="flowList" />
        </div>
      </div>
    </van-popup>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import { casualtiesPersonListFun, environmentEventDetails, getEnvironmentEventAuditListHb } from '@/api/commonPage/AccidentEvents'
import commonList from '@/assets/mixin/commonList'
import auditComponent from '../auditComponent.vue'
import customTimelineSimple from '@/components/common/custom-timeline-simple.vue'
export default {
  components: {
    auditComponent,
    customTimelineSimple
  },
  mixins: [commonList],
  data() {
    return {
      current: '',
      id: '',
      active: '',
      companyName: '',
      casualtiesPersonList: [],
      descList: [
        { field: 'companyName', label: '企业名称', value: '/', icon: '&#xe790;' },
        { field: 'eventName', label: '事故名称', value: '/', icon: '&#xe72e;' },
        { field: 'eventTime', label: '事故发生时间', value: '/', icon: '&#xe685;' },
        { field: 'eventPlace', label: '事故发生地点', value: '/', icon: '&#xe87e;' },
        { field: 'eventType', label: '事故类别', value: '/', icon: '&#xe791;' },
        { field: 'eventLevel', label: '事故等级', value: '/', icon: '&#xe61c;' },
        { field: 'eventDeath', label: '人员伤亡情况', value: '/', icon: '&#xe67a;' },
        { field: 'moneyLosses', label: '直接经济损失（万元）', value: '/', icon: '&#xe69a;' },
        { field: 'eventCause', label: '事故直接原因', value: '/', icon: '&#xe6b7;' },
        { field: 'eventCondition', label: '事故概况', value: '/', icon: '&#xe611;' },
        { field: 'punish', label: '行政处罚', value: '', icon: '&#xe644;' },
        { isFile: true, field: 'researchShareList', label: '事故调查报告', value: '/', icon: '&#xe692;' },
        { isFile: true, field: 'reportShareList', label: '事故上报报告', value: '/', icon: '&#xe692;' }
      ],
      deviceFieldList: [
        { icon: '&#xe617;', field: 'personName', label: '姓名' },
        { icon: '&#xe668;', field: 'sex', label: '性别' },
        { icon: '&#xe790;', field: 'age', label: '年龄' },
        { icon: '&#xe790;', field: 'workUnit', label: '工作单位' },
        { icon: '&#xe790;', field: 'casualtiesTypeName', label: '伤亡情况' }
      ],
      examineDescList: [
        { field: 'auditResult', label: '审核结果', value: '/', icon: '&#xe790;' },
        { field: 'auditOpinion', label: '审核意见', value: '/', icon: '&#xe790;' },
        { field: 'auditPerson', label: '审核人员', value: '/', icon: '&#xe790;' },
        { field: 'auditTime', label: '审核时间', value: '/', icon: '&#xe790;' }
      ],
      factoryImgList: [],
      descData: {},
      auditComponentShow: false,
      flowComponentShow: false,
      flowList: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.initHandler()
      this.initEnvironmentEventDetails()
      this.casualtiesPersonListHandler()
    })
  },
  methods: {
    initHandler() {
      const { current, id, active } = this.$route.query
      this.current = current || ''
      this.id = id || ''
      this.active = active || ''
    },
    async initEnvironmentEventDetails() {
      try {
        this.layout.showAreaLoading(['.baseLoad'])
        this.layout.showAreaLoading(['.baseLoad1'])
        // this.layout.showLoading()
        const { data, status } = await environmentEventDetails({ [this.active === '环境事件' ? 'environmentEventId' : 'punishId']: this.id })
        if (status === 0 && data) {
          this.descList.forEach(v => {
            v.value = data[v.field] ? data[v.field] : v.value
            if (v.field === 'researchShareList' || v.field === 'reportShareList') {
              v.uuid = data[v.field.replaceAll('Name', 'Uuid')]
            }
          })
          this.examineDescList.forEach(v => {
            v.value = data[v.field] ? data[v.field] : v.value
          })
        }

        this.descData = data
        // this.layout.hideLoading()
        this.layout.hideAreaLoading(['.baseLoad'])
        this.layout.hideAreaLoading(['.baseLoad1'])
      } catch (err) {
        console.log(err)
      }
    },
    async casualtiesPersonListHandler() {
      try {
        const { data, status } = await casualtiesPersonListFun({ [this.active === '环境事件' ? 'environmentEventId' : 'punishId']: this.id, casualtiesType: '' })
        if (status === 0) {
          this.casualtiesPersonList = data
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 审核流程列表
    async getEnvironmentEventAuditList() {
      const { status, data } = await getEnvironmentEventAuditListHb({
        eventId: this.id
      })
      if (status === 0 && data) {
        this.flowComponentShow = true
        this.flowList = data.map(item => {
          return {
            name: item.operateName,
            time: item.updateTime,
            source: item.operateType,
            msg: item.submitPerson ? `企业名称：${item.companyName}\n提交人：${item.submitPerson}` : `审核结果：${item.statusName}\n审核意见：${item.auditDesc}\n审核人：${item.updateUser}`
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.desContent {
  line-height: 0.533rem;
}
.bottom-box{
  position: fixed;
  bottom: 1px;
  left: 0;
  right: 0;
  min-height: 100px;
  background-color: rgba(255, 255, 255,0.9);
  box-shadow: 0px -8px 8px rgba(0,0,0,0.4);
  .el-button{
    margin: auto;
  }
}
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  overflow: hidden;

  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;

    .icon-box {
      position: absolute;
      right: .5rem;
      top: 0;

      .iconfont.active {
        color: blue;
      }
    }
  }

  .pop-content {
    // background-color: #fff;
    margin: 0 0.25rem;
    padding: 0rem !important;
  }

  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>
